<template>
  <div class="travel">  
    <travel-header/>
    <travelphoto/>
    <Travelstar/>
    <Travelplace/>
    <Travelticket/>
   <Travelmeal/>
   <Travellast/>
   <Travelend/>
  </div>
</template>

<script>
// "./"代表本目录，"../"代表上一次目录
import TravelHeader from './components/TravelHeader.vue'
import Travelphoto from './components/Travelphoto.vue'
import  Travelstar from './components/Travelstar.vue' 
import Travelplace from './components/Travelplace.vue'
import Travelticket from './components/Travelticket.vue'
import Travelmeal from './components/Travelmeal.vue'
import Travellast from './components/Travellast.vue'
import Travelend from './components/Travelend.vue'
import axios from 'axios';

export default {
  name: 'travel',
  components: {
    TravelHeader,
     Travelphoto,
     Travelstar,
     Travelplace,
     Travelticket,
     Travelmeal,
     Travellast,
     Travelend,
  },
  data: function(){
    return{
       iconList: [],
      recommendList: []
    }
  },
  mounted(){
    this.getTravelApiInfo()
  },
  methods: {
    getTravelApiInfo(){
      axios.get("/mock/travel.json").then(this.getTravelResponseInfo)
    },
    getTravelResponseInfo(response){
      //  console.log(response.data);
      let res = response.data  //就是home.json里面的内容
      if(res.success && res.dataList){
        const data = res.dataList //取json中的datalist属性
        // console.log(data.iconLists.length)
        this.iconList = data.iconLists
        this.recommendList = data.recommendLists
      }
    }
  }
}
</script>
 
 